<body>
    <h1>0</h1>
</body>
<script>
    setInterval(function(){
        var fontObj =document.createElement('div')
        fontObj.className='font'
        var min=0
        var max=25
        var index =Math.floor(Math.random()*(max-min+1)+min)
        fontObj.innerText ='ABCDEFGHIJKLMNOPQRSTUVWSYZ'.split('')[index]
        var leftMin =0
        var leftMax=(window.innerWidth || document.documentElement.clientWidth)
        var left =Math.floor(Math.random()*(leftMax-leftMin+1)+leftMin)
        var topMin=0
        var topMax=(window.innerHeight || document.documentElement.clientHeight)
        var top=Math.floor(Math.random()*(topMax-topMin+1)+topMin)
        fontObj.style.position='absolute'
        fontObj.style.left =left+'px'
        fontObj.style.top =top+'px'
        document.body.appendChild(fontObj)
    },1000)

    document.onkeyup=function(evt){
        var e= evt || window.event
    console.log(e.key)
    var fonts=document.querySelectorAll('div.font')
    fonts.forEach(function(item){
        if(item.innerText.toLowerCase() ===e.key.toLowerCase()){
            document.body.removeChild(item)
            var num =parseInt(document.querySelector('h1').innerText)
            document.querySelector('h1').innerText=num+1
        }
    })
}
</script>